<template>
  <el-card>
    <el-form>
      <el-form-item label="属性名">
        <el-input
          placeholder="请输入属性名"
          class="attr-input"
          width="10%"
          v-model="attrFormData.attrName"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :icon="Plus" @click="showAddAttrValue"
          >添加属性值</el-button
        >

        <el-table :data="attrFormData.attrValueList" border class="attr-table">
          <el-table-column
            type="index"
            label="序号"
            width="60"
            align="center"
          ></el-table-column>
          <el-table-column label="属性值名称" props="valueName">
            <template #default="{ row, $index }">
              <el-input
                v-if="row.isEdit"
                ref="input"
                v-model="row.valueName"
                @blur="goShow(row, $index)"
                @keyup.enter="goShow(row, $index)"
              ></el-input>
              <div v-else @click="goEdit(row)">{{ row.valueName }}</div>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="{ row, $index }">
              <el-tooltip content="删除属性值" placement="top" effect="light">
                <el-button
                  type="danger"
                  :icon="Delete"
                  size="small"
                  @click="delAttrValue($index)"
                />
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :disabled="isBtnDisabled" @click="submitForm">保存</el-button>
        <el-button @click="emit('setIsShowAttrList', true)">取消</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script lang="ts">
export default {
  name: "SaveOrUpdate",
}
</script>

<script lang="ts" setup>
import { Plus, Delete } from "@element-plus/icons-vue"
import {
  defineEmits,
  defineProps,
  reactive,
  ref,
  nextTick,
  computed,
} from "vue"
import {updateAttrApi} from '@/api/product/attr'
import type { attrItem, attrValueItem } from "@/api/product/model/attrModel"
import {useCategoryStore} from '@/stores/categorySelector'
const input = ref()
const emit = defineEmits(["setIsShowAttrList", "setAttr"])
const categoryStore = useCategoryStore()
const props = defineProps<{
  attr: attrItem
}>()
// 表单数据
const attrFormData = reactive<attrItem>(props.attr)
// 确定按钮禁用功能
const isBtnDisabled = computed(() => {
  /*
     1. 属性名需要有值
     2. 属性值至少有一个值
     3. 属性值至少有一个元素有valueName
  */
  return (
    !attrFormData.attrName ||
    !attrFormData.attrValueList.find((attrValue) => attrValue.valueName)
  )
})
// 添加属性值
const showAddAttrValue = async () => {
  attrFormData.attrValueList.push({
    valueName: "",
    isEdit: true,
  })
  // dom更新后聚焦
  await nextTick()
  input.value.focus()
}
// 失去焦点，切换元素
const goShow = (row: attrValueItem, index: number) => {
  if (!row.valueName) {
    attrFormData.attrValueList.splice(index, 1)
    return
  }
  row.isEdit = false
}
// 点击切换到编辑模式
const goEdit = async (row: attrValueItem) => {
  // 更新dom元素时异步的
  row.isEdit = true
  await nextTick()
  input.value.focus()
}
// 删除attr属性
const delAttrValue = (index: number) => {
  attrFormData.attrValueList.splice(index, 1)
}
const submitForm = async() => {
  await updateAttrApi({
    ...attrFormData,
    categoryId: categoryStore.category3Id as number, // 三级分类id
    categoryLevel: 3, // 三级分类
  })
  emit("setIsShowAttrList", true);
}
</script>

<style scoped></style>
